<template>
    <div class="app-container">
        <el-row :gutter="10" style="height: 100%">
            <el-col :sm="10" :xs="24" style="height: 100%">
                <el-card class="box-card" style="height: 100%">
                    <template #header>
                        <div class="clearfix">
                            <span>字典列表</span>
                        </div>
                    </template>
                    <dictType @dictionaryClick="dictionaryClick" @resetItem="resetItem" />
                </el-card>
            </el-col>
            <el-col :sm="14" :xs="24" style="height: 100%">
                <el-card class="box-card" style="height: 100%">
                    <template #header>
                        <div class="clearfix">
                            <span>[{{ dict.dictName }}]字典详情</span>
                        </div>
                    </template>
                    <dictDataItem :dictTypeRecord="dict" />
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script setup lang="ts" name="DictionaryManage">
    import { ref } from "vue";
    import dictType from "./dictType";
    import dictDataItem from "./dictDataItem";
    const dict = ref({});
    function dictionaryClick(row: any) {
        dict.value = row;
    }
    function resetItem() {
        dict.value = {};
    }
</script>
<style lang="scss" scoped>
    .el-card :deep(.el-card__body) {
        padding: 0px;
    }
</style>
